
{{> account_sidebar}}
<link rel="stylesheet" href="{{static}}/css/font.css{{cacheBust}}">
<link rel="stylesheet" href="{{static}}/js/vendor/codemirror5/lib/codemirror.css{{cacheBust}}">
<link rel="stylesheet" href="{{static}}/css/themes.css{{cacheBust}}">
<!-- <link rel="stylesheet" href="{{static}}/css/jsbin-cm-theme.css{{cacheBust}}"> -->

<h1>Customise your JS Bin editor</h1>

<section id="content">
  <p>Tweak JS Bin's editor to your liking and manage the addons loaded.</p>

  <form id="editor-settings">
    <h3>Settings</h3>
    <div>
    	<label for="font-size">Font size</label>
  		<input name="font" id="font-size" type="number">
    </div>
    <div>
    	<label for="theme">Theme</label>
  		<select id="theme" name="theme">
        <option selected>jsbin</option>
		    <option value="default">codemirror</option>
        <option>3024-day</option>
        <option>3024-night</option>
        <option>ambiance</option>
        <option>base16-dark</option>
        <option>base16-light</option>
        <option>blackboard</option>
        <option>cobalt</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>lesser-dark</option>
        <option>mbo</option>
        <option>mdn-like</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>neat</option>
        <option>night</option>
        <option>paraiso-dark</option>
        <option>paraiso-light</option>
        <option>pastel-on-dark</option>
        <option>rubyblue</option>
        <option>solarized dark</option>
        <option>solarized light</option>
        <option>the-matrix</option>
        <option>tomorrow-night-eighties</option>
        <option>twilight</option>
        <option>vibrant-ink</option>
        <option>xq-dark</option>
        <option>xq-light</option>
      </select>
  	</div>
    <div>
    	<span class="label">Spacing</span>
      <label><input type="radio" id="indentWithTabs" value="tabs" name="spacing"> tabs</label>
      <label><input type="radio" id="indentWithSpaces" value="spaces" name="spacing"> spaces</label>
  	</div>
    <div>
    	<label for="tabSize">Indent width</label>
  		<input id="tabSize" name="tabSize" min="1" type="number">
  	</div>
    <div>
      <label for="lineWrapping">Wrap lines</label>
      <input id="lineWrapping" name="lineWrapping" type="checkbox">
    </div>
    <div>
      <label for="lineNumbers">Line numbers</label>
      <input id="lineNumbers" name="lineNumbers" type="checkbox">
    </div>

    <h3>Addons</h3>
    <div>
      <span class="label">Key bindings</span>
      <label><input type="radio" name="keymap" id="defaultKeymap" value="default"> Default</label>
      <label><input type="radio" name="keymap" id="vim" value="vim"> Vim</label>
      <label><input type="radio" name="keymap" id="emacs" value="emacs"> Emacs</label>
      <label><input type="radio" name="keymap" id="sublime" value="sublime"> Sublime</label>
    </div>

    <div>
      <label for="activeline">Active line</label>
      <input id="activeline" name="activeline" type="checkbox" aria-describedby="activeline-desc">
      <div id="activeline-desc" class="mini-desc">Style the current cursor line</div>
    </div>

    <div>
      <label for="closebrackets">Close brackets</label>
      <input id="closebrackets" name="closebrackets" type="checkbox" aria-describedby="closebrackets-desc">
      <div id="closebrackets-desc" class="mini-desc">Auto-close brackets and quotes</div>
    </div>

    <div>
      <label for="matchbrackets">Match brackets</label>
      <input id="matchbrackets" name="matchbrackets" type="checkbox" aria-describedby="matchbrackets-desc">
      <div id="matchbrackets-desc" class="mini-desc">Highlights matching brackets whenever the cursor is next to them</div>
    </div>

    <div>
      <label for="highlight">Highlight</label>
      <input id="highlight" name="highlight" type="checkbox" aria-describedby="highlight-desc">
      <div id="highlight-desc" class="mini-desc">Highlight all instances of a currently selected word</div>
    </div>

    <div>
      <label for="matchtags">Match tags</label>
      <input id="matchtags" name="matchtags" type="checkbox" aria-describedby="">
      <div id="matchtags-desc" class="mini-desc">Highlight matching tags under the cursor (useful with HTML)</div>
    </div>

    <div>
      <label for="trailingspace">Trailing space</label>
      <input id="trailingspace" name="trailingspace" type="checkbox"  aria-describedby="trailingspace-desc">
      <div id="trailingspace-desc" class="mini-desc">Visualise trailing whitespace</div>
    </div>

    <div>
      <label for="fold">Code folding</label>
      <input id="fold" name="fold" type="checkbox" aria-describedby="fold-desc">
      <div id="fold-desc" class="mini-desc">Fold and unfold matching code blocks</div>
    </div>

    <div>
      <label for="tern">Tern</label>
      <input id="tern" name="tern" type="checkbox" aria-describedby="tern-desc">
      <div id="tern-desc" class="mini-desc"><a href="http://ternjs.net/" target="_blank">Tern.js</a> code-analysis engine (not available in the preview below)</div>
    </div>

  	<input type="hidden" id="_csrf" name="_csrf" value="{{token}}">
  </form>

  <h2>Preview</h2>
  <textarea id="editor-settings-example">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script&gt;
    function Name(param) {&nbsp;&nbsp;&nbsp;&nbsp;
      this.name = param || &#39;string&#39;;
      return this;&nbsp;&nbsp;&nbsp;&nbsp;
    }
    var object = new Object();
    var longVariableNameToDemonstrateLineWrappingInCodeMirror = &#39;line wrapping is on by default&#39;.split(&#39; &#39;).map(String.prototype.toUpperCase.bind(String.prototype)).join(&#39;/n&#39;);

  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea>
</section>
<script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
<script src="{{static}}/js/vendor/codemirror5/lib/codemirror.js{{cacheBust}}"></script>
<script src="{{static}}/js/vendor/codemirror5/mode/xml/xml.js{{cacheBust}}"></script>
<script src="{{static}}/js/vendor/codemirror5/mode/htmlmixed/htmlmixed.js{{cacheBust}}"></script>
<script src="{{static}}/js/vendor/codemirror5/mode/javascript/javascript.js{{cacheBust}}"></script>
<script src="{{static}}/js/account/editor-settings.js{{cacheBust}}"></script>
<script src="{{static}}/js/editors/addons.js{{cacheBust}}"></script>
{{#addons}}<script src="{{../static}}{{.}}"></script>{{/addons}}
